<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        #content {
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    用户名：<input type="text" id="user">
    密码：<input type="password" id="pwd">

    <h1>localStrage</h1>
    <input type="button" value="删除" id="l1">
    <input type="button" value="读取" id="l2">
    <input type="button" value="存储" id="l3">
    <div id="content"></div>
    <h1>SessionStrage</h1>
    <input type="button" value="删除" id="s1">
    <input type="button" value="读取" id="s2">
    <input type="button" value="存储" id="s3">
    <script>
        $(document).ready(function () {

            $("#l3").click(function () {
                let user = $("#user").val();
                let pwd = $("#pwd").val();
                console.log(user + "密码:" + pwd);
                localStorage.username = user;
                localStorage.password = pwd;
                $("#content").html("本地数据已经存储")
            })
            $("#l2").click(function () {
                let str = "用户名是：" + localStorage.username + ",密码是：" + localStorage.password
                $("#content").html(str)
            })
            $("#l1").click(function () {
                localStorage.clear();
                $("#content").html("数据已经清除")
            })
            $("#s3").click(function () {
                let user = $("#user").val();
                let pwd = $("#pwd").val();
                console.log(user + "密码:" + pwd);
                sessionStorage.username = user;
                sessionStorage.password = pwd;
                $("#content").html("会话数据已经存储")

            })
            $("#s2").click(function () {
                let str = "用户名是：" + sessionStorage.username + ",密码是：" + sessionStorage.password
                $("#content").html(str)
            })
            $("#s1").click(function () {
                sessionStorage.clear();
                $("#content").html("数据已经清除")
            })
        })

    </script>

</body>

</html>